<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>板块管理</el-breadcrumb-item>
      <el-breadcrumb-item>板块列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输板块名称" clearable v-model="name" @clear="searchBoard">
            <el-button slot="append" icon="el-icon-search" @click="searchBoard"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddBoardDialog">添加板块</el-button>
        </el-col>
      </el-row>
      <el-table :data="boardList" border stripe @selection-change="selectionChange">
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column label="板块ID" prop="id" width="70px"></el-table-column>
        <el-table-column label="板块名称" prop="name"></el-table-column>

        <el-table-column prop="weight" label="板块热度" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.weight=='1'" style="color: red">热门</span>
            <span v-if="scope.row.weight=='0'" style="color: limegreen">普通</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
        <el-table-column label="修改时间" prop="modifyTime" width="180px"></el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeBoardById(scope.row.id)">删除</el-button>

            <el-button type="success" size="mini" v-if="scope.row.weight == 0" @click="changeWeightById(scope.row.id,1)" >推荐热门</el-button>
            <el-button type="warning" size="mini" v-if="scope.row.weight == 1" @click="changeWeightById(scope.row.id,0)" >取消热门</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3,6,12,24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <div>
      <!--修改菜单-->
      <el-dialog title="修改板块信息" :visible.sync="editBoardFormVisible" :close-on-click-modal="false">
        <el-form ref="editBoardForm" :rules="editBoardRules" :model="editBoard" label-width="150px" size="mini">

          <el-form-item label="板块名称" prop="name">
            <el-input v-model="editBoard.name"></el-input>
          </el-form-item>

          <el-form-item label="权重" prop="weight">
            <el-radio v-model="editBoard.weight" checked :label="1">推荐热门</el-radio>
            <el-radio v-model="editBoard.weight" :label="0">取消热门</el-radio>
          </el-form-item>

<!--          <el-form-item label="是否撤销" prop="isCancel">-->
<!--            <el-radio v-model="editBoard.isCancel" checked :label="0">正常</el-radio>-->
<!--            <el-radio v-model="editBoard.isCancel" :label="1">已撤销</el-radio>-->
<!--          </el-form-item>-->

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEditBoard">取 消</el-button>
          <el-button type="primary" @click="saveEditBoard">确 定</el-button>
        </div>
      </el-dialog>


      <!--添加菜单-->
      <el-dialog title="添加板块信息" :visible.sync="addBoardFormVisible" :close-on-click-modal="false">
        <el-form ref="addBoardForm" :rules="addBoardRules" :model="addBoard" label-width="150px" size="mini">

          <el-form-item label="板块名称" prop="name">
            <el-input v-model="addBoard.name"></el-input>
          </el-form-item>

          <el-form-item label="权重" prop="weight">
            <el-radio v-model="addBoard.weight" checked :label="1">热门</el-radio>
            <el-radio v-model="addBoard.weight" :label="0">普通</el-radio>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddBoard">取 消</el-button>
          <el-button type="primary" @click="saveAddBoard">新 增</el-button>
        </div>

      </el-dialog>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      bodyList:[],
      BoardIds: [],
      addBoardFormVisible: false,
      editBoardFormVisible: false,
      pageNum: 1,
      pageSize: 3,
      boardList: [],
      allBoard:[],
      total: 0,
      name: "", //板块名称
      addBoard: {
        name: '',
        weight:'',
        isDelete:0
      },
      editBoard: {
        name: '',
        weight:'',
        isDelete:0
      },
      editBoardRules: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        weight: [
          {required: true, message: "请选择板块热度", trigger: "change"}
        ]
      },
      parentMenus: [],
      addBoardRules: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        weight: [
          {required: true, message: "请选择板块热度", trigger: "change"}
        ]
      }
    };
  },

  methods: {
    showAddBoardDialog() {
      this.addBoardFormVisible = true;
    },
    cancelAddBoard() {
      this.addBoardFormVisible = false;
      this.$refs.addBoardForm.resetFields();
    },

    saveAddBoard() {
      this.$refs.addBoardForm.validate(valid => {
        if (!valid) {
          return;
        }
        console.log(this.addBoard);
        let url = "board/addBoard";
        this.$axios.post(url, this.addBoard)
            .then(res => {
              if (res.data.code == 200) {
                this.addBoardFormVisible = false;
                this.reloadData();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      })

    },

    showEditDialog(row) {
      this.editBoardFormVisible = true;
      this.editBoard = row
    },

    cancelEditBoard() {
      this.editBoardFormVisible = false;
      this.$refs.editBoardForm.resetFields();
    },

    saveEditBoard() {
      console.log(this.editBoard);
      let url = "board/modifyBoard";
      this.$axios.put(url, this.editBoard)
          .then(res => {
            if (res.data.code == 200) {
              this.editBoardFormVisible = false;
              this.reloadData();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.reloadData();
    },

    handleCurrentChange(now) {
      this.pageNum = now;
      this.reloadData();
    },

    searchBoard() {
      this.pageNum = 1;
      this.reloadData();
    },


    removeBoardById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "board/deleteBoard/" + id;
        this.$axios.delete(url).then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                })
                this.reloadData();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    changeWeightById(id,status){
      let url = "board/hotBoard";
      this.$axios.get(url,{
        params:{
          id:id,
          status:status
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.reloadData();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },

    //------批量删除员工----------------------------------
    selectionChange(obj) {
      this.BoardIds = [];
      for (let o of obj) {
        this.BoardIds.push(o.id);
      }
    },

    reloadData() {
      let url = "board/showBoardByPage";
      this.$axios.get(url, {
        params: {
          name: this.name,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.boardList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },

    // reloadParentMenu() {
    //   let url = "Board/parentPer";
    //   this.$axios.get(url).then(res => {
    //     console.log(res)
    //     if (res.data.code == 200) {
    //       this.parentMenus = res.data.data;
    //       console.log(res.data.data)
    //     } else {
    //       this.$message({
    //         type: "error",
    //         message: res.data.msg,
    //         duration: 1000
    //       })
    //     }
    //   });
    // }
  },
  created() {
    this.reloadData();
    this.initBoard();
    // this.reloadParentMenu();
  }
};
</script>
<style lang="less" scoped>
</style>